﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>layui</title>
    <link href="Content/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        body {
            background-color: #EEF5FD;
        }

        .clearfix:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfix {
            zoom: 1
        }

        .container {
            width: 1140px;
            margin: 0 auto;
            /*position: absolute;
            top: 50%;
            left: 50%;*/
            /*background: #fbfbfb;*/
            /*background-color: #ffffff;
            margin-top: -400px;
            margin-left: -530px;
            border: 6px solid #fbfbfb;
            border-radius: 6px;*/
        }

        header {
            background-color: #ffffff;
            padding: 8px 0;
        }

            header .header-nav li {
                float: left;
                margin-right: 20px;
            }

                header .header-nav li a:hover {
                    text-decoration: underline;
                }
        /*自定义layui样式*/
        .layui-card-header-primary {
            background-color: #3aa8f2;
            color: #ffffff;
        }

        .layui-input-inline {
            width: 150px !important;
        }

        .layui-form-label {
            width: 90px;
        }

        .layui-card-body {
            padding: 10px 0 !important;
        }

        .lay-btn-primary {
            background-color: #3aa8f2;
        }

        .main {
            margin-top: 10px;
            height: 100%;
        }

            .main .main-content {
                background-color: #ffffff;
                display: table;
            }

            .main .container-left {
                width: 140px;
                display: table-cell;
                vertical-align: top;
                padding-top: 10px;
                border-right: 1px solid #f1f1f1;
            }

                .main .container-left ul li {
                }

                    .main .container-left ul li.active a {
                        background-color: #3aa8f2;
                        color: #ffffff !important;
                    }

                    .main .container-left ul li a {
                        padding: 6px 0 6px 20px;
                        display: block;
                    }

            .main .container-right {
                width: 960px;
                display: table-cell;
                padding: 0 10px;
            }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <ul class="header-nav layui-clear">
                <li><a href="goodsdata.html">商品资料</a></li>
                <li><a href="#" id="addCategory" onclick="addCategory()">货物种类</a></li>
                <li><a href="#">客户购货排行</a></li>
                <li><a href="customerorder.html">客户订单</a></li>
                <li><a href="buytop.html">客户购货排行</a></li>
            </ul>
        </div>
    </header>
    <div class="main">
        <div class="container">
            <div class="main-content">
                <div class="container-left">
                    <ul class="clearfix">
                        <li class="active"><a href="#">全部</a></li>
                        <li><a href="#">12</a></li>
                        <li><a href="#">23</a></li>
                    </ul>
                </div>
                <div class="container-right">
                    <!--<div class="layui-card-header layui-card-header-primary">
                        <h4>商品资料</h4>
                    </div>-->
                    <div class="">
                        <table id="goods-list"></table>
                        <div class="layui-tab layui-tab-card">
                            <ul class="layui-tab-title">
                                <li class="layui-this">基本属性</li>
                                <li>样品图示</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <form class="layui-form" action="">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">类别编号</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="输入类别编号" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">编号</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="编号" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">店内码</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="店内码" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">名称</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="输入名称" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">单位</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="输入单位" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">规格</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="规格" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">品牌</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="品牌" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">检索码</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="检索码" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">辅助条码</label>
                                                <div class="layui-input-inline">
                                                    <select name="city" lay-verify="required">
                                                        <option value=""></option>
                                                        <option value="0">北京</option>
                                                        <option value="1">上海</option>
                                                        <option value="2">广州</option>
                                                        <option value="3">深圳</option>
                                                        <option value="4">杭州</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">成本价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="成本价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">零售价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="零售价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">批发价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="批发价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">储值卡价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="储值卡价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">会员价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="会员价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">最低售价</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="最低售价" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">库存上限</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="库存上限" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">库存下限</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="库存下限" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">供应商</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="供应商" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">产地</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="产地" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">包装规格</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">柜组</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="柜组" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">坏货类别</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="坏货类别" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">默认折扣零售</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">%</div>
                                                <label class="layui-form-label" style="width:80px">折扣批发</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="柜组" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">%</div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">备注</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">期初库存</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="期初库存" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">提成比列</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="title" required lay-verify="required" placeholder="提成比列" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-form-mid layui-word-aux">%</div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">可以打折销售</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="可以打折销售">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">可以打折销售</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="可以打折销售">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">不计库存</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="不计库存">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">停用</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="停用">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">微店销售</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="微店销售">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">新品</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="新品">
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">特惠</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="特惠">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">精品</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="精品">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label">热销</label>
                                                <div class="layui-input-inline">
                                                    <input type="checkbox" name="like[write]" title="热销">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="layui-tab-item">
                                    样品图示
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--货品种类录入-->
            <div style="margin:20px;display:none" id="layerAddCategory">
                <div class="layui-form-item">
                    <label class="category-label" style="display:block">种类代码：</label>
                    <div>
                        <input type="text" name="categoryCode" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="category-label" style="display:block">种类名称：</label>
                    <div>
                        <input type="text" name="categoryName" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="category-label" style="display:block">会员价折扣系数（会员价=零售价*折扣系数）：</label>
                    <div>
                        <input type="text" name="categoryName" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
    <!--<script src="Content/layui/lay/modules/jquery.js"></script>-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <div class="layui-form-label">查询条件</div>
            <div class="layui-input-inline" style="width:100px;">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0" selected>按编号查</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="title" required lay-verify="required" placeholder="包装规格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-btn-container" style="display:inline-block;margin-left:20px">
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="seach">查询</button>
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="insert">新增</button>
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="copy">复制</button>
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="image">图片</button>
            <button class="layui-btn layui-btn-sm lay-btn-primary" lay-event="getCheckData">获取选中行数据</button>
        </div>
    </script>
    <script src="Content/layui/layui.js"></script>
    <script type="text/javascript">
        //Demo
        var $;
        layui.use(['form','jquery', 'table', 'element', 'layer'], function () {
            var form = layui.form;
            var $ = layui.$;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
            //初始化数据
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#goods-list'
                , height: 312
                , url: 'https://www.layui.com/demo/table/user' //数据接口
                , toolbar: '#toolbarDemo'
                , page: true //开启分页
                , cols: [[ //表头
                    { type: 'radio' }
                    , { field: 'id', title: '编号', width: 80, sort: true }
                    , { field: 'username', title: '名称', width: 100 }
                    , { field: 'sex', title: '规格', width: 80, sort: true }
                    , { field: 'city', title: '单位', width: 80 }
                    , { field: 'sign', title: '成本价', width: 177 }
                    , { field: 'experience', title: '零售价', width: 80, sort: true }
                    , { field: 'score', title: '批发价', width: 80, sort: true }
                    , { field: 'classify', title: '会员价', width: 80 }
                ]]
            });
            var layer = layui.layer;
            layer.open({
                title:'货品种类录入',
                type: 1,
                content: $('#layerAddCategory'),
                area: ['350px', '350px'],
                btn: ['确定', '取消', '增加'],
                yes:function (index, a) {
                    layer.msg('点击了确定');
                    return false;
                },
                btn2: function (index, b) {
                    layer.msg('点击了取消笑');
                    return true;
                },
                btn3: function (index, b) {
                    layer.msg('点击了增加');
                    return false;
                }
            });
            $("#addCategory").on('click', function () {
                layer.open({
                    title: '货品种类录入',
                    type: 1,
                    content: $('#layerAddCategory'),
                    area: ['350px', '350px'],
                    btn: ['确定', '取消', '增加'],
                    yes: function (index, a) {
                        layer.msg('点击了确定');
                        return false;
                    },
                    btn2: function (index, b) {
                        layer.msg('点击了取消笑');
                        return true;
                    },
                    btn3: function (index, b) {
                        layer.msg('点击了增加');
                        return false;
                    }
                });
            });
        });
        //$(function () {
        //    console.info("测试");
        //})
        //$('#addcategory').on('click', function () {
        //    layer.open({
        //        type: 1,
        //        content: $('#layerAddCategory')
        //    });
        //})
        //function addCategory() {
        //    console.info(123456);
        //    var layer = layui.layer;
        //    layer.open({
        //        type: 1,
        //        content: $('#layerAddCategory'),
        //        area: ['500px', '300px']
        //    });
        //}
    </script>
</body>
</html>